<template>
<!-- 疑似异常交易监控报表 -->
    <div class="fund-list">
        <content-layout>
            <el-form label-width="90px" label-position="right" slot="searchSlot">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="选择组合：">
                            <el-input
                                placeholder="选择组合"
                                prefix-icon="el-icon-search"
                                v-model="searchForm.pFundList" 
                                @focus="focusSelect"
                                size="mini"
                                style="width: 82%"
                            >
                            </el-input>   
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="交易日历：">
                            <el-select v-model="searchForm.pCalendar" size="mini">
                                <el-option value="CHINA_EX" label="交易所日历"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="视图类型：">
                            <el-select v-model="searchForm.pViewType" size="mini" disabled>
                                <el-option value="0" label="html"></el-option>
                                <el-option value="1" label="其他"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                </el-row> 
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="时间频率：">
                            <el-select v-model="searchForm.pTime" size="mini" disabled>
                                <el-option value="时间段" label="时间段"></el-option>
                            </el-select>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开始日期：">
                            <el-date-picker
                                v-model="searchForm.pBegDate"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyyMMdd"
                                size="mini">
                            </el-date-picker>  
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束日期：">
                            <el-date-picker
                                v-model="searchForm.pEndDate"
                                type="date"
                                placeholder="选择日期" 
                                value-format="yyyyMMdd"
                                size="mini">
                            </el-date-picker>    
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" label="">
                        <el-button type="primary" @click="checkContent">查询</el-button>
                        <el-button @click="exportFile">导出</el-button>
                    </el-col>
                </el-row>    
            </el-form>
            <h2 slot="titleSlot">疑似异常交易监控报表</h2>
            <template v-if="tableIs">
                <el-table 
                    :key="tablekey" 
                    :data="tableData.slice((page.currentPage-1)*page.pageSize,page.currentPage*page.pageSize)" 
                    border 
                    size="mini" 
                    style="width: 100%" 
                    height="66vh" 
                    slot="tableSlot"
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="cellStyle"
                    stripe
                >
                    <el-table-column
                        v-for="(item, index) in tableLabel"
                        :key="index + item.prop + 2" 
                        :prop="item.prop"
                        :label="item.label"
                        :min-width="item.width"
                    >
                        <template slot-scope="scope">
                            <span v-if="item.prop == 'udlStatus'">{{ scope.row[item.prop] }}</span>
                            <span v-else>{{ scope.row[item.prop] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-for="(item2, index2) in tableLabel1"
                        :key="index2 + item2.prop" 
                        :prop="item2.prop"
                        :label="item2.label"
                    >
                        <el-table-column
                            v-for="(item3, index3) in tableLabel2"
                            :key="index3 + item3.prop + 3" 
                            :prop="item2.prop + item3.prop"
                            :label="item3.label"
                            :align="item3.align"
                            :min-width="item3.width"
                        > 
                            <template slot-scope="scope">
                                <span v-if="(item2.prop + item3.prop).indexOf('amountRatio') != -1">{{scope.row[item2.prop + item3.prop]?Number(scope.row[item2.prop + item3.prop] * 100).toFixed(2) + '%':''}}</span>
                                <span v-else-if="(item2.prop + item3.prop).indexOf('tPrice') != -1">{{scope.row[item2.prop + item3.prop]?Number(scope.row[item2.prop + item3.prop]).toFixed(2):''}}</span>
                                <span v-else>{{scope.row[item2.prop + item3.prop]}}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page="page.currentPage"
                    :page-sizes="[5, 10, 20, 25, 50]"
                    :page-size="page.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableData.length"
                    slot="paginationSlot"
                >
                </el-pagination>    
            </template>
            
        </content-layout>
        <FundDialog 
            :fundVisible='fundVisible'
            @emitCheckGroup="emitCheckGroup"
        ></FundDialog>
    </div>
</template>

<script lang="ts">
import { downLoadFile } from '@/utils/request';
import { Component, Vue } from 'vue-property-decorator';
import RiskPagination from '@/common/components/risk-pagination.vue';
import { dateFormat, timeFormat } from '@/utils/tools';
import ContentLayout from '../commom/content-layout.vue';
import FundDialog from '../commom/fund-dialog.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'IrregularTrade',
    components: {
        RiskPagination,
        ContentLayout,
        FundDialog
    },
})
export default class IrregularTrade extends Vue {
    dateFormat = dateFormat;
    private tableData: any[] = [];

    private page: pages = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };

    // 查询条件
    searchForm: any = {
        pFundList: '', // 选择组合
        pCalendar: 'CHINA_EX', // 计算日历
        pTime: '时间段', // 时间频率
        pViewType: '0', // 视图类型
        pBegDate: '', // 开始日期
        pEndDate: '', // 结束日期
        pSamplelen: '', // 时间窗长
        pConfidence: '', // T检验置信度
        pSample: '', // T检验样本数
        pDirection: '', // 是否区分交易方向
        pRollingdate: '', // 是否滚动日期
        pBilateral: '', // 组合比较模式
        pPrflag: '', // 溢价率算法
        pValueType: '', // 占优比筛选
        pHighvalue: '', // 交易占优比上限
        pLowervalue: '', // 交易占优比下限
        pCheckflag: '', // 是否通过检验
        pPrpreshold: '', // 溢价率阈值
        pAtypeList: [], // 资产范围
    };

    // 修改行产品名称
    fundName: string = '';
    tablekey: number = -1;
    fundVisible: boolean = false;
    tableIs: boolean = false;

    tableLabel = [
      {label: '证券代码', prop: 'stockCode', width: '140px'},
      {label: '证券名称', prop: 'stockName', width: '140px'},
      {label: '组合名称', prop: 'fundName', width: '220px'},
      {label: '涨跌幅', prop: 'udlStatus', width: '240px'},
    ]
    tableLabel1 = []
    tableLabel2 = [
      {label: '交易方向', prop: 'tType', align: 'center', width: '140px'},
      {label: '交易价格', prop: 'tPrice', align: 'right', width: '140px'},
      {label: '交易数量', prop: 'tAmount', align: 'right', width: '140px'},
      {label: '市场交易量占比', prop: 'amountRatio', align: 'right', width: '160px'},
    ]

    async mounted() {
    }
    // 选择组合
    private focusSelect() {
        this.fundVisible = true;
    }
    // 点击查询按钮
    private checkContent() {
        if (this.searchForm.pFundList == '') {
            this.$message.warning('请填写【选择组合】的范围');
            return
        }
        if (this.searchForm.pBegDate == '') {
            this.$message.warning('请填写【开始日期】的范围');
            return
        }
        if (this.searchForm.pEndDate == '') {
            this.$message.warning('请填写【结束日期】的范围');
            return
        }
        this.tableLabel = [
          {label: '证券代码', prop: 'stockCode', width: '140px'},
          {label: '证券名称', prop: 'stockName', width: '140px'},
          {label: '组合名称', prop: 'fundName', width: '220px'},
          {label: dateFormat(this.searchForm.pEndDate) + ' 涨跌幅', prop: 'udlStatus', width: '240px'},
        ]
        let searchForm = JSON.parse(JSON.stringify(this.searchForm));
        console.log(searchForm.pFundList)
        searchForm.pFundList = searchForm.pFundList.split(',')
        this.$axios.post('/fairTrade/UDLMonitoring', searchForm)
        .then((res: any) => {
            this.tableData = [];
            this.tableLabel1 = [];
            if (res.length != 0) {
                // this.tableData = res;
                this.$nextTick(() => {
                    res[0].tradeDates.forEach((item) => {
                        this.tableLabel1.push({
                            label: item,
                            prop: item
                        })
                    })    
                })
                res.forEach(item1 => {
                    res[0].tradeDates.forEach(item2 => {
                        item1[item2 + 'amountRatio'] = item1.tradeDate[item2] ? item1.tradeDate[item2].amountRatio : '';
                        item1[item2 + 'tAmount'] = item1.tradeDate[item2] ? item1.tradeDate[item2].tAmount : '';
                        item1[item2 + 'tPrice'] = item1.tradeDate[item2] ? item1.tradeDate[item2].tPrice : '';
                        item1[item2 + 'tType'] = item1.tradeDate[item2] ? item1.tradeDate[item2].tType : '';
                    })
                })
                this.tablekey++;
                this.page.currentPage = 1;
                this.tableData = res;
                this.tableIs = true;
                this.yh_message_success('查询成功！')
            } else {
                this.tableIs = false;
                this.yh_message_success('查询成功, 暂无相关数据！')
            }
        })
    }
    // 翻页
    private pageChange() {

    }
    cellStyle ({ row, column, rowIndex, columnIndex }) {
        if (row.udlStatus.indexOf('涨停') != -1 && columnIndex == 3) {
            return 'background: red; color: white';
        } else if (row.udlStatus.indexOf('跌停') != -1 && columnIndex == 3) {
            return 'background: green; color: white';
        } else {
            return ''
        }
    }
    exportFile() {
        if (this.tableData.length == 0) {
            this.$message.warning('数据为空！');
            return
        }
        let searchForm = JSON.parse(JSON.stringify(this.searchForm));
        console.log(searchForm.pFundList)
        searchForm.pFundList = searchForm.pFundList.split(',')
        downLoadFile({
            url: '/fairTrade/exportUDLMonitoring',
            method: 'post',
            data: searchForm,
            loading: true,
            // loadingMsg: '正在准备导出，请稍后··· ···'
        });    
    }
    handleSizeChange(val) {
        this.page.pageSize = val;
    }
    handleCurrentChange(val) {
      this.page.currentPage = val;
    }
    // 选择组合
    emitCheckGroup(param1, param2) {
        this.fundVisible = false;
        if (param2 == 'confirm') {
            this.searchForm.pFundList = '';
            let pFundList = []
            param1.forEach(item => {
                pFundList.push(item.fundCode);
            })    
            this.searchForm.pFundList = pFundList.join(',')
        }
    }
}
</script>
<style lang="scss" scoped>
.fund-list {
    height: 100%;
}
.el-col-6 {
  height: 50px;
}
/deep/ .el-form-item__label {
    color: #575757;
}
/deep/ .el-pagination .el-select .el-input .el-input__inner {
    background: white;
    border: 1px solid #e5e5ea;
}
</style>
